<!DOCTYPE html>
<html lang="en">
<head>
    <title>模板语法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- Vue模板语法有两大类：
            1.插值语法
                功能：用于解析标签体内容
                写法：{{xxxx}}，xxxx会作为表达式去解析，且可以自动读取到data中的属性
            2.指令语法：
                形式：指令:参数=参数值
                功能：用于解析标签（包括：标签属性、标签内容、绑定事件）
                举例：v-bind:href='url'------简化-----:href='url'
                备注：Vue中有很多的指令，此处只用v-bind举个例zi  
    -->
    <div id="root">
      <h2>插值语法</h2>  
      <h4>你好，{{msg}}</h4>  
      <h4>你好，{{msg.toUpperCase()}}</h4>  

      <hr />
      <h2>指令语法</h2>
      <a v-bind:href='url'>点我去学习</a>
      <a v-bind:href='url'>点我去学习</a>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            msg:"iwat",
            url:'http://www.baidu.com'
        }
    })
</script>
</html>